/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.deptName" placeholder="输入物品名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.deptNo" placeholder="输入物品代码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flsex; justify-content: flex-end;">
      <el-button type="primary" size="small" @click="clickUploadButton">上传<i class="el-icon-upload el-icon--right" ></i></el-button>
      <el-button type="primary" size="small" @click="clickDownloadloadButton">下载<i class="el-icon-download el-icon--right" ></i></el-button>
      <audio ref="audioSuccessRuku" src="../../../static/入库成功.mp3"></audio>
      <audio ref="audioSuccessChuku" src="../../../static/出库成功.mp3"></audio>
      <audio ref="audioFailChuku" src="../../../static/出库失败，库存不足.mp3"></audio>
      <audio ref="audioFail" src="../../../static/系统异常,请检查.mp3"></audio>

    </div>
    <!--列表-->
    <el-table 
      size="small" 
      :data="listData" 
      v-loading="loading" 
      border 
      element-loading-text="拼命加载中" 
      style="width: 100%;"
      :row-class-name="tableRowClassName">
      
      <el-table-column align="center" type="index" width="60">
      </el-table-column>

      <el-table-column prop="photo" label="照片" width="150">
        <template slot-scope="scope">
          <el-image 
            style="width: 100px; height: 100px"
            :src="scope.row.url" 
            :preview-src-list="scope.row.srcList">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column sortable prop="name" label="名称" width="130">
      </el-table-column>
      
      <el-table-column sortable prop="storehouse" label="库房" width="80">
      </el-table-column>
      <el-table-column sortable prop="shelf" label="货架" width="100">
      </el-table-column>
      
      <el-table-column sortable prop="number" label="编号" width="100">
      </el-table-column>
      
      <el-table-column sortable prop="type" label="型号" width="70">
      </el-table-column>
      <el-table-column sortable prop="inventory" label="库存余量" width="100">
      </el-table-column>
      <el-table-column sortable prop="unit" label="单位" width="70">
      </el-table-column>
      <el-table-column sortable prop="createTime" label="创建时间" width="100">
      </el-table-column>
      <el-table-column sortable prop="createUser" label="创建人" width="100">
      </el-table-column>
      <el-table-column sortable prop="updateTime" label="修改时间" width="100">
      </el-table-column>
      <el-table-column sortable prop="updateUser" label="修改人" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="50">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">设置告警</el-button>
          <el-button size="mini" @click="clickChuku(scope.$index, scope.row)">出库</el-button>
          <el-button size="mini" @click="clickRuku(scope.$index, scope.row)">入库</el-button>
          <el-button size="mini" type="danger" @click="deleteGood(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="名称" prop="name">
          <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="库房" prop="storehouse">
          <el-input size="small" v-model="editForm.storehouse" auto-complete="off" placeholder="请输入库房名称"></el-input>
        </el-form-item>
        <el-form-item label="货架" prop="shelf">
          <el-input size="small" v-model="editForm.shelf" auto-complete="off" placeholder="请输入货架名称"></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="number">
          <el-input size="small" v-model="editForm.number" auto-complete="off" placeholder="请输入位置编号"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="type">
          <el-input size="small" v-model="editForm.type" auto-complete="off" placeholder="请输入商品型号"></el-input>
        </el-form-item>

        <el-form-item label="库存余量" prop="inventory">
          <el-input size="small" v-model="editForm.inventory" auto-complete="off" placeholder="请输入库存余量"></el-input>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input size="small" v-model="editForm.unit" auto-complete="off" placeholder="请输入计数单位"></el-input>
        </el-form-item>
        <el-form-item label="告警值" prop="alarmValue">
          <el-input size="small" v-model="editForm.alarmValue" auto-complete="off" placeholder="请输入告警值"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="imgList">
          <el-upload
            class="upload-demo"
            drag
            accept=".jpg,.png"
            action=""
            :auto-upload="false"
            multiple
            :on-change="imgChange"
            :file-list="editForm.imgList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip" style="color: red;">上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>





    <el-dialog :title="uplodetitle" :visible.sync="uploadVisible" width="40%" @click="closeUplodeDialog" :resizable="true">
      <div>
        <el-upload drag
              :limit=limitNum
              :auto-upload="false"
              accept=".xlsx"
              :action="UploadUrl()"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text" style="flex: 1; display: flex; justify-content: center; align-items: center;">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">只能上传xlsx文件, 且不超过10M</div>
        </el-upload>
      <br/>
      <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
      <el-button size="small" @click="closeUplodeDialog">取消</el-button>
    </div>
    </el-dialog>






<!-- 出库 -->
    <el-dialog :title="chukuname" :visible.sync="chukuVisible" width="70%" @click="closeChukuDialog" :resizable="true">
      <div>
        <div>
          <el-card class="barcode-card">
            <img :src="barcodeImageUrl" alt="Barcode" v-if="barcodeImageUrl" style="max-width: 100%;" />
            <div v-else class="placeholder">条形码图片正在加载中</div>
          </el-card>
        </div>
        <br/>
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="物品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="code"
            label="物品代码">
          </el-table-column>
          <el-table-column
            sortable
            prop="inventory"
            label="库存数量">
          </el-table-column>
          <el-table-column
            prop="alarmValue"
            label="告警限制值">
          </el-table-column>
          <el-table-column
            prop="stockCheck"
            label="出库数量核查">
          </el-table-column>
        </el-table>
      

        <br/>
        <div class="button-container">
          <el-button size="small" @click="closeChukuDialog">取消</el-button>
          <el-button size="small" type="primary" @click="chuku">出库</el-button>
          
        </div>
    </div>
    </el-dialog>


<!-- 入库 -->
    <el-dialog :title="rukuname" :visible.sync="rukuVisible" width="70%" @click="closeRukuDialog" :resizable="true">
      <div>
        <div>
          <el-card class="barcode-card">
            <img :src="barcodeImageUrl" alt="Barcode" v-if="barcodeImageUrl" style="max-width: 100%;" />
            <div v-else class="placeholder">条形码图片正在加载中</div>
          </el-card>
        </div>
        <br/>
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="物品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="code"
            label="物品代码">
          </el-table-column>
          <el-table-column
            sortable
            prop="inventory"
            label="库存数量">
          </el-table-column>
          <el-table-column
            prop="alarmValue"
            label="告警限制值">
          </el-table-column>
          <el-table-column
            prop="stockCheck"
            label="入库数量核查">
          </el-table-column>
        </el-table>
      

        <br/>
        <div class="button-container">
          <el-button size="small" @click="closeRukuDialog">取消</el-button>
          <el-button size="small" type="primary" @click="chuku">入库</el-button>
        </div>
    </div>
    </el-dialog>




  </div>







</template>

<script>
import {GoodsList, GoodsSave, GoodsDelete, GoodsUploadExcel} from '../../api/basisMG'
import Pagination from '../../components/Pagination'
import axios from 'axios';
export default {
  data() {
    return {

  

      code: '',
      nextCode: '',
      lastCode: '',
      lastTime: '',
      nextTime: '',


      tableData: [],
      rukuname: '入库',
      barcodeImageUrl: null,//条形码的src
      chukuname: '出库',
      rukuVisible:  false,
      chukuVisible: false,
      limitNum: 2,  // 上传excell时，同时允许上传的最大数
      fileList: [],   // excel文件列表
      uploadVisible: false,
      uplodetitle: '上传文件',

      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        id: '',
        name: '',
        storehouse: '',
        shelf: '',
        number: '',
        type: '',
        inventory: '',
        unit: '',
        alarmValue: '',
        imgList: [],
        // token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        // token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {


    chuku(){

    },
    closeRukuDialog(){
      this.rukuVisible = false
    },
    openRukuDialog(){
      this.rukuVisible = true
    },
    closeChukuDialog(){
      this.chukuVisible = false;
    },

    openChukuDialog(){
      this.chukuVisible = true;
    },

    clickRuku(index,row){
      this.saomiao(1)//参数1代表入库
      console.log(this.code + '************');
      this.fetchBarcodeImage(row.id);
      this.tableData = [{
        id: row.id,
        name: row.name,
        code: '159156654656',
        inventory: row.inventory,
        alarmValue: row.alarmValue,
        stockCheck: '正常'
      }]
      this.openRukuDialog()
    },

    clickChuku(index,row){
      this.saomiao(-1)//参数-1代表出库
      console.log(this.code + '************');
      this.fetchBarcodeImage(row.id);
      this.tableData = [{
        id: row.id,
        name: row.name,
        code: '159156654656',
        inventory: row.inventory,
        alarmValue: row.alarmValue,
        stockCheck: '正常'
      }]
      this.openChukuDialog()
    },

    saomiao(chu_or_ru){
      console.log(chu_or_ru);

      var _chu_or_ru = chu_or_ru

      window.document.onkeypress = (e) => {
        if (window.event) { // IE
          this.nextCode = e.keyCode
        } else if (e.which) { // Netscape/Firefox/Opera
          this.nextCode = e.which
        }
        // console.log(e.which)
        // console.log(this.row)
        console.log("-------------")
        if (e.which === 13) { // 键盘回车事件
          console.log(this.code.length)
          if(this.code.length == 0){
            console.log('扫描到的数据为:'+this.code)
            this.parseQRCode(this.code,chu_or_ru) // 获取到扫码枪输入的内容，做别的操作
            this.lastCode = ''
            this.lastTime = ''
            return
          }//新加的需要删除掉的
          if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
          console.log('扫码结束。')
          console.log('条形码：', this.code)
          this.parseQRCode(this.code,_chu_or_ru) // 获取到扫码枪输入的内容，做别的操作
          this.lastCode = ''
          this.lastTime = ''
          return
        }

        this.nextTime = new Date().getTime()
        if (!this.lastTime && !this.lastCode) {
          this.code = '' // 清空上次的条形码
          this.code += e.key
          console.log('扫码开始---', this.code)
        }
        if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
          this.code = e.key
          console.log('防止首字缺失。。。', this.code)
        } else if (this.lastCode && this.lastTime) {
          this.code += e.key
          console.log('扫码中。。。', this.code)
        }
        this.lastCode = this.nextCode
        this.lastTime = this.nextTime


        console.log('扫描到的数据为:'+this.code)
      }


      

    },



    parseQRCode(code,chu_or_ru) {

      //这里可以去加一些判断验证码长度的代码
      if (code.length === 0) {
      // 处理自己的逻辑
        console.log('请输入条码！')
      } else {
      // let codeParams = {
      //   codeParam:code
      // }
      //这里写请求后端的接口，去获取信息展示在table 中
      
      // var params = {
      //   code:code,  //ID+编码
      //   num:chu_or_ru //出库还是入库
      // }
      axios.get('/api/Goods/ruku?code='+code+'&num='+chu_or_ru,{
        
        headers: {
          Authorization: localStorage.getItem('logintoken')
        },
        
      }).then(res => {
        // console.log('入库成功：');
        console.log(res.data)
        if ( res.data.success ) {
          this.tableData = res.data.data
          this.$message.success(res.data.msg)

          if(chu_or_ru > 0){
            this.$refs.audioSuccessRuku.play();
          }else{
            this.$refs.audioSuccessChuku.play();
          }
          
        } else {
          this.$refs.audioFailChuku.play();
          this.$message.info(res.data.msg)
        }

        
        this.getdata(this.formInline);
      }).catch(err => {
        
        this.$message.error("出现异常", err)
        this.$refs.audioFail.play();
      })






      }
      this.codeValue = code
    },





    fetchBarcodeImage(id) {
      // 向后端请求条形码图片的 URL
      // 你可以使用 Axios、Fetch API 或其他 HTTP 客户端库来发送请求
      // 假设这里使用 Axios
      axios.get('/api/Goods/barcode?id=' + id,{
        headers: {
            Authorization: localStorage.getItem('logintoken')
        },
        responseType: 'blob'
      })
        .then(response => {
          console.log(response.data);

          // const blob = new Blob([response.data], { type: 'image/png' });
          this.barcodeImageUrl = window.URL.createObjectURL(response.data);
        })
        
        .catch(error => {
          console.error('出现异常，获取条形码失败', error);
        });
    },


















      clickUploadButton(){
        this.uploadVisible = true
      },

      clickDownloadloadButton(){
        axios({
            method: 'get',
            url: '/api/Goods/download',
            responseType: 'blob', // 响应类型为二进制流
            headers: {
              Authorization: localStorage.getItem('logintoken')
            }
          }).then(response => {
            console.log(response);
            const url = window.URL.createObjectURL(new Blob([response], { type: 'application/vnd.ms-excel' }));
            const link = document.createElement('a');
            link.href = url;
            link.download = 'test.xlsx'; //重命名文件 // 指定下载的文件名
            link.click()
            link.remove()
            // document.body.appendChild(link);
            URL.revokeObjectURL(url);
        })
    },
      closeUplodeDialog(){
        this.uploadVisible = false
        this.fileList = []
      },

      // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
        this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        console.log(file.raw);
        this.fileList.push(file.raw) ;
        console.log(this.fileList);
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
        console.log('before upload');
        console.log(file);
        let extension = file.name.substring(file.name.lastIndexOf('.')+1);
        let size = file.size / 1024 / 1024;
        if(extension !== 'xlsx') {
          this.$message.warning('只能上传后缀是.xlsx的文件');
        }
        if(size > 10) {
          this.$message.warning('文件大小不得超过10M');
        }
      },
      // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
        this.$message.success('文件上传成功');
      },
      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.$message.error('文件上传失败');
      },
      UploadUrl:function(){
       // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
        return ""
      },
      uploadFile() {
        // console.log('=============');
        // console.log(this.fileList);


        this.loading = true
        if (this.fileList.length === 0){
          this.loading = false
          this.$message.warning('请上传文件');
        } else {
          GoodsUploadExcel(this.fileList)
            .then(res => {
              this.loading = false
              if(res.success){
                
                this.closeUplodeDialog()
                this.$message.success("文件上传成功！")
                this.getdata(this.formInline)
              }else{
                this.$message.error(res.msg)
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('文件上传失败，请稍后再试！')
            })
        }
      },



    // 获取公司列表
    getdata(parameter) {
      this.loading = true

      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = 5

      // 模拟数据开始
      // this.loading = false
      // this.listData = res.data
      // this.pageparm.currentPage = this.formInline.page
      // this.pageparm.pageSize = this.formInline.limit
      // this.pageparm.total = res.count
      // 模拟数据结束

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      GoodsList(parameter)
        .then(res => {
          this.loading = false
          // console.log(res);
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            //对结果中的图片URL加上token
            res.data.forEach(e => {
              e.url = e.img + '?token=' + localStorage.getItem('logintoken')
              e.srcList = [
                e.img + '?token=' + localStorage.getItem('logintoken')
              ]
            })

            // .push({
              
            // })
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {

      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.id = row.id
        this.editForm.inventory = row.inventory
        this.editForm.name = row.name
        this.editForm.number = row.number
        this.editForm.shelf = row.shelf
        this.editForm.type = row.type
        this.editForm.unit = row.unit
        this.editForm.alarmValue = row.alarmValue
        this.editForm.storehouse = row.storehouse
        this.imgList = []
      } else {
        this.title = '添加'
        this.editForm.id = ''
        this.editForm.inventory = ''
        this.editForm.name = ''
        this.editForm.number = ''
        this.editForm.shelf = ''
        this.editForm.type = ''
        this.editForm.unit = ''
        this.editForm.alarmValue = ''
        this.editForm.storehouse = ''
        this.imgList = []
        this.editForm.url = []
        this.editForm.srcList = []
      }
    },

    //将添加的图片放到editForm表单项imgList[]
    imgChange(file){
      this.editForm.imgList.push(file)
    },


    // 编辑、增加页面保存方法2 改进：增加了传输图片的能力
    submitForm(editData) {
      console.log('下面是图片列表');
      console.log(this.editForm.imgList);


      const formData = new FormData();

      // 添加图片列表到formData
      this.editForm.imgList.forEach(file => {
        if (file.raw) { // 确保文件对象存在
          formData.append('images', file.raw); // 'images' 是后端期望的字段
        }
      });

       // 添加其他表单字段到formData
      Object.keys(this.editForm).forEach(key => {
        if (key !== 'imgList') { // 排除图片列表
          formData.append(key, this.editForm[key]);
        }
      });

      this.$refs[editData].validate(valid => {
        if (valid) {

          axios({
            method: 'post',
            url: "/api/Goods/save",
            headers: {
                Authorization: localStorage.getItem('logintoken')
            },
            data: formData,
          }).then(res => {
            this.loading = false
            
            if (res.data.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '商品保存成功！'
                })
                this.closeDialog() //关闭弹窗
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.msg
                })
              }

          }).catch(err => {
            this.$message.error("商品保存失败！")
          })
        } else {
          return false
        }
      })
    },





    // 编辑、增加页面保存方法1,不能传输图片，弃用
    submitForm1(editData) {
      console.log('下面是图片列表');
      console.log(this.editForm.imgList);

      this.$refs[editData].validate(valid => {
        if (valid) {
          GoodsSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '商品保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('公司保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除公司
    deleteGood(index, row) {
      
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          console.log(row.id + '*****');

          GoodsDelete(row.id)
            .then(res => {

              

              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '商品已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('商品删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editForm.imgList = []
      this.editFormVisible = false
    },

    tableRowClassName({row, rowIndex}) {
      
      // console.log(row);
      if (row.alarm) {
        return 'warning-row';
      }
      return '';
    },

    
    
    





  }
}


</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
/deep/.el-table .warning-row {
    background: rgb(246, 164, 101);
  }



  .button-container {
  text-align: right; /* 将按钮置于右侧 */
  margin-top: 20px; /* 添加一些顶部间距 */
}


.barcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 可根据需要调整高度 */
}

.barcode-card {
  display: flex; /* 这使.barcode-card成为了一个 Flex 容器。*/
  justify-content: center; /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
  align-items: center; /* vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 */
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
  text-align: center;
  border: 2px solid #ccc;
  box-shadow: none;
  height: 100px;
}

.barcode-image {
  
  max-width: 100%; /* 设置图片最大宽度为父元素宽度 */
  height: auto; /* 保持图片高度自适应 */
  
}

.placeholder {
  color: #999;
  font-style: italic;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dialog-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>

